<template>
    <pro-layout
        title="Ant Pro"
        :menus="menus"
        :collapsed="collapsed"
        :mediaQuery="query"
        :isMobile="isMobile"
        :handleMediaQuery="handleMediaQuery"
        :handleCollapse="handleCollapse"
        v-bind="settings"
        :i18nRender="i18nRender"
        :logo="logoRender"
    >
        <router-view />
    </pro-layout>
</template>
<script>
import img from '../../assets/logo2.png'
export default {
    data () {
        return {
            collapsed: false,
            settings: {
                layout: 'sidemenu',
                contentWidth: false,
                theme: 'dark',
                primaryColor: '#1890ff',
                fixedHeader: true,
                fixSiderbar: true,
                colorWeak: false,
                hideHintAlert: true,
                hideCopyButton: false
            },
            query: {},
            isMobile: false
        }
    },
    computed: {
        menus () {
            return this.$store.state.menus
        }
    },
    methods: {
        i18nRender (txt) {
            return txt
        },
        handleMediaQuery (val) {
            this.query = val
            if (this.isMobile && !val['screen-xs']) {
                this.isMobile = false
                return
            }
            if (!this.isMobile && val['screen-xs']) {
                this.isMobile = true
                this.collapsed = false
                this.settings.contentWidth = false
                // this.settings.fixSiderbar = false
            }
        },
        handleCollapse (val) {
            this.collapsed = val
        },
        logoRender () {
            return <img src={img} width="30"/>
        }
    }
}
</script>
